<template>
  <Popup
    :value="visiable"
    @input="onHide"
    pos="bottom">
    <SafeArea
      class="trust-actionSheet"
      position="bottom">
      <Ripple
        @click="onClick(item)"
        class="trust-actionSheet-item"
        v-for="(item, index) in list"
        :key="index">
        <span class="trust-actionSheet-text">
          {{item[text]}}
          <i
            v-if="current && current === item[text]"
            class="trust-actionSheet-selected trust-icon icon_selected"
          />
        </span>
      </Ripple>
      <Ripple
        v-if="showCancel"
        @click="onHide"
        class="trust-actionSheet-item trust-actionSheet-cancel">
        取消
      </Ripple>
    </SafeArea>
  </Popup>
</template>

<script type="text/ecmascript-6">
  import SafeArea from '../../components/SafeArea/index.vue'
  import Popup from '../../components/Popup/index.vue'
  import Ripple from '../../components/Ripple/index.vue'

  export default {
    components: { SafeArea, Popup, Ripple },
    data () {
      return {
        visiable: false,
        showCancel: true,
        cancel: null,
        current: null,
        text: 'text',
        list: []
      }
    },
    methods: {
      show ({ list = [], current = null, click = null, cancel = null, showCancel = true, text = 'text' }) {
        this.list = list
        this.cancel = cancel
        this.click = click
        this.showCancel = showCancel
        this.current = current
        this.text = text
        this.visiable = true
      },
      onHide () {
        this.visiable = false
        this.cancel && this.cancel()
      },
      onClick (item) {
        this.visiable = false
        if (item && item.click) {
          item.click(item)
        }
        this.click && this.click(item)
      }
    }
  }
</script>

<style
  lang="stylus"
  rel="stylesheet/stylus"
  type="text/stylus">
  .trust-actionSheet
    background: #f8f6fa

    &-item
      text-align: center
      line-height: 50px
      background: #FFFFFF

    &-text
      position: relative

    &-selected
      position: absolute
      right: -40px

    &-cancel
      margin-top: 10px
</style>
